<template>
<view>
    <view>
        <view class="member-header" :style="getBgStyle"></view>
        <view class="member-main">
            <view class="box noshadow ">
                <view v-if="checkLogin" >
                    <view  class="pd16_15 flex alcenter">
                        <navigator url="/pages/client/member/info">
                            <u-avatar :src="memberInfo.face"></u-avatar>
                        </navigator>
                        <view style="width: calc(100% - 96rpx);" class="pl15 flex alcenter space">
                            <view>
                                <navigator url="/pages/client/member/info">
                                <view class="flex alcenter">
                                    <view class="ft16 ftw600 cl-main text-over" style="max-width: 160rpx;">{{memberInfo.nick_name}}</view>
                                    <view v-if="memberInfo.level_id>0" class="tag-vip ucenter ml5">
                                        <text class="iconfont iconvip ft14"></text>
                                        <text class="ml5 mr5 ft12">{{memberInfo.level_name}}</text>
                                    </view>
                                    <view v-else class="tag-user ml5">{{memberInfo.level_name}}</view>
                                    <u-icon name="arrow-right" :bold="true" color="#999" size="16" customStyle="margin-left:10px;"></u-icon>
                                </view>
                                <view class="ft14 ftw400 cl-main mt8">{{memberInfo.hidden_mobile}}</view>
                                </navigator>
                            </view>
                            <view @click="showQrcode = true" class="qrocde-btn" :style="getBtnStyle">
                                <text class="ft12 cl-w">会员码</text>
                            </view>
                        </view>
                    </view>
                    <view class="bd-line"></view>
                    <view class="pt20 pb20 flex alcenter">
                        <view class="col3 text-center">
                            <navigator url="/pages/client/money/index">
                                <view class="ft14 cl-main ftw600">100</view>
                                <view class="ft12 cl-notice mt6">余额</view>
                            </navigator>
                        </view>
                        <view class="col3 text-center">
                            <navigator url="/pages/client/integral/index">
                                <view class="ft14 cl-main ftw600">200</view>
                                <view class="ft12 cl-notice mt6">积分</view>
                            </navigator>
                        </view>
                        <view class="col3 text-center">
                            <navigator url="/pages/client/coupon/mine/index">
                                <view class="ft14 cl-main ftw600">3</view>
                                <view class="ft12 cl-notice mt6">优惠券</view>
                            </navigator>
                        </view>
                    </view>
                </view>

                <view v-else class="pd24_15">
                    <view class="text-center ft14 cl-info">
                        您暂未登录，点击下方登录按钮
                    </view>
                    <view class="mt12 flex center">
                        <u-button type="primary" @tap="toLogin" shape="circle" :color="$config.color" customStyle="width:250rpx;margin-top:20rpx;">登录/注册</u-button>
                    </view>
                </view>

            </view>

            <view class="mt16 box noshadow">
                <view class="pd16_15 flex alcenter space">
                    <view class="ft14 cl-main ftw500">
                        我的订单
                    </view>
                    <view data-link="/pages/client/mall/order/index" @click="memberLinkTo" class="flex alcenter cl-notice">
                        <text class="ft12">全部订单</text>
                        <u-icon name="arrow-right" :bold="true" color="#999" size="13"></u-icon>
                    </view>
                </view>
                <view class="bd-line"></view>
                <view class="pt16 pb16 flex alcenter">
                    <view data-link="/pages/client/mall/order/index?type=0" @click="memberLinkTo" class="col4 text-center">
                        <u-icon name="coupon-fill" align="center" :color="$config.color" size="32"></u-icon>
                        <view class="ft12 cl-main mt8">待付款</view>
                    </view>
                    <view data-link="/pages/client/mall/order/index?type=1" @click="memberLinkTo" class="col4 text-center">
                        <u-icon name="car-fill" align="center" :color="$config.color" size="32"></u-icon>
                        <view class="ft12 cl-main mt8">待发货</view>
                    </view>
                    <view data-link="/pages/client/mall/order/index?type=2" @click="memberLinkTo" class="col4 text-center">
                        <u-icon name="gift-fill" align="center" :color="$config.color" size="32"></u-icon>
                        <view class="ft12 cl-main mt8">待收货</view>
                    </view>
                    <view data-link="/pages/client/mall/order/index?type=3" @click="memberLinkTo" class="col4 text-center">
                        <u-icon name="bag-fill" align="center" :color="$config.color" size="32"></u-icon>
                        <view class="ft12 cl-main mt8">待自提</view>
                    </view>
                </view>
            </view>

            <view class="box noshadow pd16_15 mt16">
                <view data-link="/pages/client/member/appointment/index"  @click="memberLinkTo" class="flex alcenter space">
                    <view class="flex alcenter">
                        <u-icon name="gift-fill" align="center" :color="$config.color" size="30"></u-icon>
                        <text class="ml5 ft14 ftw500 cl-main">我的预约</text>
                    </view>
                    <text class="iconfont iconarrowr ft12 cl-notice"></text>
                </view>
                <view class="bd-line mt16 mb16"></view>

                <view data-link="/pages/client/oncecard/mine/index"  @click="memberLinkTo" class="flex alcenter space">
                    <view class="flex alcenter">
                        <u-icon name="gift-fill" align="center" :color="$config.color" size="30"></u-icon>
                        <text class="ml10 ft14 ftw500 cl-main">我的次卡</text>
                    </view>
                    <text class="iconfont iconarrowr ft12 cl-notice"></text>
                </view>
                <view class="bd-line mt16 mb16"></view>
                <view data-link="/pages/client/mall/pintuan/mine/index"  @click="memberLinkTo" class="flex alcenter space">
                    <view class="flex alcenter">
                        <u-icon name="gift-fill" align="center" :color="$config.color" size="30"></u-icon>
                        <text class="ml10 ft14 ftw500 cl-main">我的拼团</text>
                    </view>
                    <text class="iconfont iconarrowr ft12 cl-notice"></text>
                </view>
            </view>

            <view class="mt16 pd16_15 box noshadow">
                <navigator url="/pages/client/about">
                    <view class="flex alcenter space">
                        <view class="flex alcenter">
                            <u-icon name="gift-fill" align="center" :color="$config.color" size="30"></u-icon>
                            <text class="ml10 ft14 ftw500 cl-main">关于我们</text>
                        </view>
                        <text class="iconfont iconarrowr ft12 cl-notice"></text>
                    </view>
                </navigator>
                <view class="bd-line mt16 mb16"></view>
                <navigator url="/pages/client/moreapp">
                    <view class="flex alcenter space">
                        <view class="flex alcenter">
                            <u-icon name="gift-fill" align="center" :color="$config.color" size="30"></u-icon>
                            <text class="ml10 ft14 ftw500 cl-main">更多服务</text>
                        </view>
                        <text class="iconfont iconarrowr ft12 cl-notice"></text>
                    </view>
                </navigator>
            </view>

            <view class="mt16 logout" v-if="checkLogin">
                <u-button type="error" @click="logOut" shape="circle" text="退出登录" :plain="true" color="#ffffff"></u-button>
            </view>
        </view>
    </view>
</view>
</template>

<script>
//插件来源: https://ext.dcloud.net.cn/plugin?id=7541#detail
export default{
    data(){
        return {
            showQrcode:false,
            memberRoleInfo: null,
            //会员信息
            memberInfo: {
                //昵称
                nick_name: '我是昵称',
                //等级ID, 为0时为普通用户样式, 大于0时为VIP标签样式
                level_id: 2,
                //等级名称
                level_name: 'VIP会员',
                //用户名
                hidden_mobile: '13800138000'
            },
            checkLogin: true,
            //在vue页面中的view模板中使用系统设置参数$config则需要在data()中定义一下变量: $config:[], 然后就可以在模板中正常使用了:{{$config.color}}
            $config:[]
        }
    },
    computed:{
        getBgStyle(){
            return  'background:'+this.$config.color+';';
        },
    },
    onShow(){
        if(this.checkLogin){
        }
    },
    onShareAppMessage(e){
        let url = '';
        url = '/pages/client/index';
        if(this.checkLogin){
            url += '?pid='+this.memberInfo.member_id;
        }
        console.log(url);
        return {
              title: this.shopData.name,
              path: url
        }
    },
    onShareTimeline(e){
        let url = '';
        url = '/pages/client/index';
        if(this.checkLogin){
            url += '?pid='+this.memberInfo.member_id;
        }
        return {
              title: this.shopData.name,
              path: url
        }
    },
    methods:{
        logOut(){
            this.$store.commit('setMember',null);
        }
    }
}
</script>

<style>
@import url("member_demo1.css");
.member-header{
    width: 100%;
    position: relative;
    height: 240rpx;
}
.member-main{
    padding: 48rpx 30rpx;
    position: relative;
    margin-top: -240rpx;
}
.qrocde-btn{
    width: 148rpx;
    height: 60rpx;
    background: #00BA26;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logout button{
    color:red !important;
}
</style>